import { getGeneratePlan } from '@/services/rrs/api';
import { CloseCircleFilled } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Form, Input, message, Modal, Radio, Select, Space, Table, Tabs } from 'antd';
import { useState } from 'react';
import { useModel } from '../../.umi/exports';
import styles from './index.less';

const dataSource1 = [
  {
    key: '1',
    no1: 'C2',
    prono: 'GAOSL70',
    batch: 'LEC601',
    ex1: '停产',
  },
  {
    key: '2',
    no1: 'C5',
    prono: 'BOULS80',
    batch: 'FCD-21',
    ex1: '停产',
  },
  {
    key: '3',
    no1: 'D7',
    prono: 'GAOG8K0',
    batch: 'ES40H2',
    ex1: '欠产',
  },
  {
    key: '4',
    no1: 'E5',
    prono: 'GAOGAA9',
    batch: 'EC5001',
    ex1: '在库物资异常',
  },
  {
    key: '5',
    no1: 'E3',
    prono: 'BGASL67',
    batch: 'LES40H',
    ex1: '欠产',
  },
  {
    key: '6',
    no1: 'D3',
    prono: 'JW5SS67',
    batch: 'BSJ604',
    ex1: '在库物资异常',
  },
  {
    key: '7',
    no1: 'E9',
    prono: 'BRDV02',
    batch: 'EHJ4K0',
    ex1: '停产',
  },
];

const columns1 = [
  {
    title: '厂房编号',
    dataIndex: 'no1',
    key: 'no1',
  },
  {
    title: '生产编号',
    dataIndex: 'prono',
    key: 'prono',
  },
  {
    title: '货物批次',
    dataIndex: 'batch',
    key: 'batch',
  },
  {
    title: '异常情况',
    dataIndex: 'ex1',
    key: 'ex1',
  },
];

const dataSource2 = [
  {
    key: '1',
    no2: 'K1',
    yno: 'K105',
    batch: 'LEC601',
    ex2: '车辆计划到达未到达',
  },
  {
    key: '2',
    no2: 'K5',
    yno: 'K503',
    batch: 'FCD-21',
    ex2: '车辆计划离开未离开',
  },
  {
    key: '3',
    no2: 'K7',
    yno: 'K303',
    batch: 'ES40H2',
    ex2: '车辆计划离开未离开',
  },
  {
    key: '4',
    no2: 'K7',
    yno: 'K304',
    batch: 'EC5001',
    ex2: '车辆计划到达未到达',
  },
  {
    key: '5',
    no2: 'K3',
    yno: 'K101',
    batch: 'LES40H',
    ex2: '车辆计划离开未离开',
  },
  {
    key: '6',
    no2: 'K3',
    yno: 'K102',
    batch: 'BSJ604',
    ex2: '车辆计划到达未到达',
  },
  {
    key: '7',
    no2: 'K9',
    yno: 'K405',
    batch: 'EHJ4K0',
    ex2: '车辆计划到达未到达',
  },
];

const columns2 = [
  {
    title: '仓库编号',
    dataIndex: 'no2',
    key: 'no2',
  },
  {
    title: '月台编号',
    dataIndex: 'yno',
    key: 'yno',
  },
  {
    title: '货物批次',
    dataIndex: 'batch',
    key: 'batch',
  },
  {
    title: '异常情况',
    dataIndex: 'ex2',
    key: 'ex2',
  },
];

const dataSource3 = [
  {
    key: '1',
    yno: 'K105',
    batch: 'LEC601',
    mno: 'R202304',
    ex3: '装卸搬运速度过慢',
  },
  {
    key: '2',
    yno: 'K503',
    batch: 'FCD-21',
    mno: 'R202307',
    ex3: '装卸预计超时',
  },
  {
    key: '3',
    yno: 'K303',
    batch: 'ES40H2',
    mno: 'R202102',
    ex3: '装卸搬运停止',
  },
  {
    key: '4',
    yno: 'K101',
    batch: 'EC5001',
    mno: 'R202302',
    ex3: '装卸搬运停止',
  },
  {
    key: '5',
    yno: 'K101',
    batch: 'LES40H',
    mno: 'R202205',
    ex3: '装卸搬运速度过慢',
  },
  {
    key: '6',
    yno: 'K304',
    batch: 'BSJ604',
    mno: 'R202106',
    ex3: '装卸搬运速度过慢',
  },
  {
    key: '7',
    yno: 'K405',
    batch: 'EHJ4K0',
    mno: 'R202306',
    ex3: '装卸搬运停止',
  },
];

const columns3 = [
  {
    title: '月台编号',
    dataIndex: 'yno',
    key: 'yno',
  },
  {
    title: '货物批次',
    dataIndex: 'batch',
    key: 'batch',
  },
  {
    title: '机器人编号',
    dataIndex: 'mno',
    key: 'mno',
  },
  {
    title: '异常情况',
    dataIndex: 'ex3',
    key: 'ex3',
  },
];

const dataSource4 = [
  {
    key: '1',
    no3: '皖AB0710',
    name: '马超',
    no4: 'RRS2023092200001',
    ex4: '车辆长时间静止',
  },
  {
    key: '2',
    no3: '皖AC2156',
    name: '沈庆东',
    no4: 'RRS2023092200002',
    ex4: '车辆偏离预计路线',
  },
  {
    key: '3',
    no3: '皖KN9313',
    name: '陈德民',
    no4: 'RRS2023092200003',
    ex4: '车辆长时间静止',
  },
  {
    key: '4',
    no3: '皖AE6018',
    name: '薛彪',
    no4: 'RRS2023092200004',
    ex4: '司机反馈异常',
  },
  {
    key: '5',
    no3: '皖AC7916',
    name: '胡迎春',
    no4: 'RRS2023092200005',
    ex4: '车辆长时间静止',
  },
  {
    key: '6',
    no3: '皖AF9538',
    name: '吴平',
    no4: 'RRS2023092200006',
    ex4: '车辆偏离预计路线',
  },
  {
    key: '7',
    no3: '皖AS7803',
    name: '毛东',
    no4: 'RRS2023092200007',
    ex4: '司机反馈异常',
  },
];

const columns4 = [
  {
    title: '车牌号',
    dataIndex: 'no3',
    key: 'no3',
  },
  {
    title: '司机姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '运单编号',
    dataIndex: 'no4',
    key: 'no4',
  },
  {
    title: '异常情况',
    dataIndex: 'ex4',
    key: 'ex4',
  },
];

const ExceptionResponse = () => {
  const { setGenerateAndTabList } = useModel('generate');
  const [radioValue, setRadioValue] = useState(1);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const [showCX, setShowCX] = useState(false);
  const showC = () => {
    setShowCX(true);
  };
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [messageApi, contextHolder] = message.useMessage();

  const Success = async () => {
    try {
      const { code, data = [] } = await getGeneratePlan();
      if (code === '200') {
        setGenerateAndTabList(data);
        messageApi.open({
          type: 'success',
          content: '生产计划已更新',
        });
      }
    } catch (error) {
      message.error('生成失败，请重试！');
    }
  };

  const [showT, setshowT] = useState(false);
  const onChange1 = (e) => {
    if (e.target.checked) {
      setshowT(true);
    } else {
      setshowT(false);
    }
  };

  const [showCX1, setShowCX1] = useState(false);
  const showC1 = () => {
    setShowCX1(true);
  };
  const handleFooterSelectChange = (value) => {};
  const ModalFooter = () => {
    return (
      <Select
        defaultValue="联系司机"
        onChange={handleFooterSelectChange}
        options={[
          { value: '在线联系', label: '在线联系' },
          { value: '电话联系', label: '电话联系' },
          { value: '短信联系', label: '短信联系' },
        ]}
      />
    );
  };

  const columns = [
    ...columns1,
    {
      title: '操作',
      key: 'action',
      render: (_, row) => <a onClick={showModal}>操作</a>,
    },
  ];

  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const showModal1 = () => {
    setIsModalOpen1(true);
  };

  const handleOk1 = () => {
    setIsModalOpen1(false);
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };

  const onRadioChange = (e) => {
    setRadioValue(e.target.value);
  };

  const onChangeY = (key) => {
    console.log(key);
  };

  const items = [
    {
      key: '1',
      label: '车辆未到达',
      children: (
        <div>
          <Space direction="vertical">
            <Button type="primary" style={{ width: 200 }}>
              等待原货车取货
            </Button>
            <Button type="primary" style={{ width: 200 }}>
              就近安排新货车取货
            </Button>
          </Space>
        </div>
      ),
    },
    {
      key: '2',
      label: '车辆未离开',
      children: (
        <div>
          <Space direction="vertical">
            <Button type="primary" style={{ width: 200 }}>
              等待车辆离开
            </Button>
            <Button type="primary" style={{ width: 200 }}>
              联系工作人员移车
            </Button>
          </Space>
        </div>
      ),
    },
  ];
  const columnsB = [
    ...columns2,
    {
      title: '操作',
      key: 'action',
      render: (_, row) => {
        return (
          <>
            <a onClick={showModal1}> 操作</a>
          </>
        );
      },
    },
  ];
  const columnsC = [
    ...columns3,
    {
      title: '操作',
      key: 'action',
      render: (_, row) => <a>操作</a>,
    },
  ];

  const columnsD = [
    ...columns4,
    {
      title: '操作',
      key: 'action',
      render: (_, row) => <a>操作</a>,
    },
  ];

  return (
    <PageContainer>
      <Modal
        title="异常处理"
        width={500}
        open={isModalOpen1}
        onOk={handleOk1}
        onCancel={handleCancel1}
        footer={ModalFooter}
        className={styles.r7}
      >
        <Tabs defaultActiveKey="1" items={items} onChange={onChangeY} />
      </Modal>

      <Modal
        title="异常处理"
        width={500}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={ModalFooter}
        className={styles.r7}
      >
        <Form.Item label="产线修复时间">
          <Input placeholder="请输入产线修复时间(单位分钟)" autoComplete="off" />
        </Form.Item>
        <Form.Item label="等待修复是否满足当日生产" className={styles.r8}>
          <Radio.Group onChange={onRadioChange} value={radioValue}>
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </Form.Item>
        {radioValue ? (
          <span> 等待修复，按原计划生产 </span>
        ) : (
          <>
            <Button type="primary" onClick={showC} style={{ width: 400 }}>
              若该订单紧急：检查同时刻其他正在切换模具的产线
            </Button>
            {showCX && (
              <>
                <Form.Item>
                  <Radio.Group onChange={onChange1}>
                    <Space direction="vertical">
                      <Radio value="1"> 产线1</Radio>
                    </Space>
                  </Radio.Group>
                </Form.Item>
                {showT && <span className={styles.r6}> 使用该产线生产 </span>}
              </>
            )}
            <Button type="primary" onClick={showC1} className={styles.r5} style={{ width: 400 }}>
              检查故障后到原产线恢复时间段内其他闲置的产线生产
            </Button>
            {showCX1 && (
              <div>
                <p className={styles.r2}>
                  使用<span className={styles.r6}>无</span>生产
                </p>
              </div>
            )}
          </>
        )}
        <Form.Item className={styles.r7}>
          <Button onClick={handleCancel}>取消</Button>
          {contextHolder}
          <Button type="primary" onClick={Success} style={{ margin: 20 }}>
            确认
          </Button>
        </Form.Item>
      </Modal>
      <div className={styles.logo}>
        <CloseCircleFilled />
        生产状态异常
      </div>
      <Table dataSource={dataSource1} columns={columns} scroll={{ y: 300 }} />
      <div className={styles.logo}>
        <Space>
          <CloseCircleFilled />
        </Space>
        发运计划异常
      </div>
      <Table dataSource={dataSource2} columns={columnsB} scroll={{ y: 300 }} />
      <div className={styles.logo}>
        <Space>
          <CloseCircleFilled />
        </Space>
        装卸搬运异常
      </div>
      <Table dataSource={dataSource3} columns={columnsC} scroll={{ y: 300 }} />
      <div className={styles.logo}>
        <Space>
          <CloseCircleFilled />
        </Space>
        物流运输异常
      </div>
      <Table dataSource={dataSource4} columns={columnsD} scroll={{ y: 300 }} />
    </PageContainer>
  );
};
export default ExceptionResponse;
